<template>
	<view class="yoga-container">
		<u-navbar bgColor="#000000" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="center">
				<!-- 正文内容 -->
				<text style="font-size: 46rpx;font-weight: bold;">瑜伽</text>
			</view>
		</u-navbar>
		<view class="yoga-title">
			<text>累计瑜伽练习</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="yoga-min">
			<text style="margin-right: 20rpx;">0</text>
			<text>分钟</text>
		</view>
		<view class="yoga-desc">
			<text>再坚持<text style="color: #E204EA;">20</text>分钟就可以升级了</text>
		</view>
		<view class="item-title">精选好课</view>
		<view class="yoga-content">
			<view class="content-item">
				<view class="item-warp" v-for="(item,index) in list" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="item-title">助眠精选</view>
		<view class="yoga-content">
			<view class="content-item">
				<view class="item-warp" v-for="(item,index) in list2" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="item-title">更多瑜伽课程</view>
		<view class="yoga-more">
			<view class="more-item">
				<view class="item-left">
					<image src="../../static/imgs/yoga9.png" mode=""></image>
				</view>
				<view class="item-right">
					<view class="">
						3分钟平坦小腹
					</view>
					<view style="font-size: 18rpx;color: #909090;margin: 10rpx 0;">一级强度.12分钟</view>
					<view style="font-size: 18rpx;color: #909090">自由课</view>
				</view>
			</view>
			<view class="more-item">
				<view class="item-left">
					<image src="../../static/imgs/yoga10.png" mode=""></image>
				</view>
				<view class="item-right">
					<view class="">
						千年老筋拉伸
					</view>
					<view style="font-size: 18rpx;color: #909090;margin: 10rpx 0;">一级强度.12分钟</view>
					<view style="font-size: 18rpx;color: #909090">自由课</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						img: "../../static/imgs/yoga1.png",
						name: "热汗瑜伽.全身激活"
					},
					{
						img: "../../static/imgs/yoga2.png",
						name: "元气唤醒.晨间伸展"
					},
					{
						img: "../../static/imgs/yoga3.png",
						name: "深度放松.睡前拉伸"
					},
					{
						img: "../../static/imgs/yoga4.png",
						name: "15分钟全身解压拉伸"
					}
				],
				list2: [{
						img: "../../static/imgs/yoga5.png",
						name: "外国大佬asmr入睡"
					},
					{
						img: "../../static/imgs/yoga6.png",
						name: "提升精力，高质量睡眠"
					},
					{
						img: "../../static/imgs/yoga7.png",
						name: "躺下就精神.练它"
					},
					{
						img: "../../static/imgs/yoga8.png",
						name: "焦虑，压力过大.练它"
					}
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.yoga-container {
		height: 100%;
		background-color: #000000;
		padding: 0 60rpx;
		overflow-y: auto;

		.u-nav-slot {
			font-size: 46rpx;
			font-weight: bold;
		}

		.yoga-title {
			display: flex;
			align-items: center;
			color: #676767;
			margin-bottom: 40rpx;
		}

		.yoga-min {
			color: #FFFFFF;
			font-family: SimHei;
			font-weight: bold;
			font-size: 40px;
		}

		.yoga-desc {
			margin: 20px 0;
		}

		.item-title {
			color: #909090;
			font-size: 36rpx;
			margin-bottom: 40rpx;
		}

		.yoga-content {

			.content-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.content-title {}

			.item-warp {
				margin-bottom: 40rpx;

				image {
					width: 293rpx;
					height: 183rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.yoga-more {
			.more-item {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				.item-left {
					margin-right: 30rpx;

					image {
						width: 294rpx;
						height: 187rpx;
					}
				}
			}
		}

	}
</style>
